<template>
  <div>
    <!-- 返回按钮 -->
   <div class="top">
      <van-nav-bar
      left-text="返回"
      left-arrow
      @click-left="onReturn"
      ></van-nav-bar>
    </div>

    <!-- 商品分类 -->
    <van-tabs v-model="active" animated>
      <van-tab title="全部">
        <div class="container content">
          <div class="sidebar">
            <van-sidebar v-model="activeKey">
              <van-sidebar-item title="全部" @click="listItemsByShopId()" />
              <van-sidebar-item
                :title="item.itemTypeName"
                :name="item.itemTypeId"
                v-for="item in sidebarList"
                :key="item.itemTypeId"
                @click="onChange(item.itemTypeId)"
              ></van-sidebar-item>
            </van-sidebar>
          </div>

          <!-- 商品 -->
          <div class="content" ref="content">
            <van-empty
              class="custom-image"
              image="https://img01.yzcdn.cn/vant/custom-empty-image.png"
              description="暂无商品"
              v-if="showNullState"
            />
            <van-card
            desc="月售 122"
              :price="item.price"
              :thumb="getImagePath(item.itemPicture)"
              v-for="item in itemList"
              :key="item.itemId"
            >
              <template #title>
                  <span class="span11">{{item.itemName}}</span>
              </template>
              <template #footer>
                <van-button color="" round size="small">编辑</van-button>
                <van-button color="#FFC54E" round size="small" v-if="item.itemState == 0" @click="offShelf(item,1)">{{ item.itemState == 0 ? "上架" : "下架"}}</van-button>
                <van-button color="#FFC54E" round size="small" v-else @click="offShelf(item,0)">{{ item.itemState == 0 ? "上架" : "下架"}}</van-button>
              </template>
            </van-card>
          </div>

        </div>
      </van-tab>

      <van-tab title="已下架">
        套餐界面
      </van-tab>

      <van-tab title="单点不送">
        评价界面
      </van-tab>

      <van-tab title="已售空">
        评价界面
      </van-tab>

      <van-tab title="买赠一">
        评价界面
      </van-tab>
      
    </van-tabs>
  

    <!-- 底部导航栏 -->
    <van-tabbar v-model="activei" active-color="black">
      <van-tabbar-item>
        <template>
          <span @click="onShowTwo()">管理分组</span>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <template>
          <!-- <img class="img1" src="../assets/img/批量下单.png" />
          <span >批量操作</span> -->
          <!-- <van-icon :name="require('../assets/img/批量下单.png')" size="20"/> -->
          <span>批量操作</span>
        </template>
      </van-tabbar-item>
      <van-tabbar-item>
        <template>
          <span>排序管理</span>
        </template>
      </van-tabbar-item>
      <van-tabbar-item @click="onNewItem()">
        <template>
          <span>新建商品</span>
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'ItemManage',
  data() {
    return {
      showNullState:true,
     // http://localhost:8081/meituan-api/target/meituan-api-1.0-SNAPSHOT/WEB-INF/classes/images/item/
      baseUrl: 'http://localhost:8081/images/item/',
      //保存商品类型id
      itemIdNumber:0,
      // 管理分组数据
      columnTwo: ['杭州', '宁波', '温州', '绍兴', '湖州', '嘉兴', '金华', '衢州'],
      // 管理分组选中值的索引
      typeindex:null,
      // 底部导航栏下标
      activei: 0,
      // 新建商品--图片上传
      uploader: [{ url: '' }],
      // 商品名称
      tradename:'',
      // 商品价格
      commodityprice:'',
      // 商品规格
      value: '',
      // 商品规格数据
      columns: ['杭州', '宁波', '温州', '嘉兴', '湖州'],
      showPicker: false,

      icon: {
        active: 'https://img01.yzcdn.cn/vant/user-active.png',
        inactive: 'https://img01.yzcdn.cn/vant/user-inactive.png',
      },
      checkBoxResult:[],
      radio:0,
      activeKey: 0,
      badgeContent: 0,
      checked: true,
      // 类型数组
      sidebarList: [],
      isScrolling: false,
      active:0,
      //商品列表
      itemList:[],
      //商品的数量
      itemNumber:0,
      //是否打开购物车
      gowushow: false,
      // 商家信息
      shop:this.$store.state.shop,

}
  },
  mounted() {
    this.getItemTypeByShopId();
    this.listItemsByShopId();
    this.$nextTick(() => {
      this.setupScrollEvent();
      this.setupTouchEvents();
  });
  },
  created(){

  },
  methods: {
    //拼接地址
    getImagePath(imgName){
      return `${this.baseUrl}${imgName}`;
    },
    //点击上架下架
    offShelf(item,state){
      axios.defaults.headers['Content-type'] = 'application/x-www-form-urlencoded;charset=utf-8';
      axios.post("/api/item/updateItemState",{
        itemId:item.itemId,
        itemState:state
      }).then(result => {
        if (result.data.data === 1) {
          //判断是否为全部类型
          if(this.itemIdNumber == 0){
            this.listItemsByShopId();
            return;
          }
          console.log("itemIdNumber"+this.itemIdNumber);
          this.onChange(this.itemIdNumber)
        }
      })
    },

    //通过商家id查询全部商品类型
    getItemTypeByShopId(){
      console.log("这是查询全部类型 getItemTypeByShopId",this.shop.shopId);
      axios.get("/api/item/itemType/getItemTypeListByShopId",
      {
        params:{
          shopId:this.shop.shopId
        }
      }).then(result =>{
        this.sidebarList = result.data.data
      })
    },
    //通过商家id查询全部商品
    listItemsByShopId(){
      console.log("这是查询全部商品，id=",this.shop.shopId);
      this.itemIdNumber = 0
      axios.get("/api/item/listItemsByShopId",
      {
        params:{
          shopId:this.shop.shopId
        }
      }).then(result =>{
        this.itemList = result.data.data;
        if (this.itemList.length > 0) {
          this.showNullState = false
        }
      })
    },
    // //商品分类的全部项
    // onWhole(){
    //   axios.get("/item/listItemsByShopId",
    //   {
    //     params:{
    //       shopId:1
    //     }
    //   }).then(result =>{
    //     this.itemList = result.data.data;
    //   })
    // },
    //返回函数
    onReturn(){
      console.log("/shopHome/",this.$store.state.shop.shopId);
      this.$router.push(
        {path:`/shopHome/${this.$store.state.shop.shopId}`}
        // {path:"/shopHome"}
        )
    },
    //点击新建商品
    onNewItem(){
      this.$router.push({
        name:"newgroup"
      })
    },
    //点击管理分组
    onShowTwo(){
      this.$router.push({
        name:'group'
      })
    },
    //点击分类的选项
    onChange(itemTypeId) {
      this.itemIdNumber = itemTypeId
      axios.get("/api/item/getItemListByItemTypeIdAndShopId",
      {
        params:{
          shopId:this.shop.shopId,
          itemTypeId:itemTypeId
        }
      }).then(result =>{
        // console.log(this.itemList);
        this.itemList = result.data.data
      })
    },



    //以下是固定滚轮
    handleScroll(event) {
      if (!this.isScrolling) {
        event.preventDefault();
        const deltaY = event.deltaY;
        const content = this.$refs.content;
        content.scrollTop += deltaY;
      }
    },
    handleTouchStart(event) {
      this.startY = event.touches[0].clientY;
    },
    handleTouchMove(event) {
      const content = this.$refs.content;
      const deltaY = event.touches[0].clientY - this.startY;
      content.scrollTop -= deltaY;
      this.startY = event.touches[0].clientY;
    },
    setupScrollEvent() {
      const content = this.$refs.content;
      content.addEventListener('wheel', this.handleScroll, { passive: false });
    },
    setupTouchEvents() {
      const content = this.$refs.content;
      content.addEventListener('touchstart', this.handleTouchStart);
      content.addEventListener('touchmove', this.handleTouchMove, {
        passive: false,
      });
    },
  },
};
</script>

<style scoped>
.custom-image{
  margin-top: 90px;
}
.button-with-badge {
  position: relative;
  background-color: #ffdd4d;
}

.badge {
  position: absolute;
  top: -11px;
  right: -12px; 
}
.container {
  display: flex;
}

.sidebar {
  /* flex: 0 0 120px; */
  overflow-y: auto;
}

.content {
  flex: 1;
  overflow-y: auto;
  height: calc(92vh - 70px);
}

.van-sidebar-item {
  background-color: #f8f8f8;
  cursor: pointer;  
}

.van-tabs__line{
  background-color: #f5d453;
}

.img1,.img2,.img3{
  width: 20px;
  height: 20px;
  margin-right: 2px;
}

.van-tabbar-item .van-tabbar-item__text span{
  font-size: 13px;
}
.span11{
 font-size: 16px;
 color: #000000;
}
</style>
